<template>
	<div class="login">
		<div class="login-main">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
			  <el-form-item label="用户名" prop="username">
			    <el-input v-model="ruleForm.username"></el-input>
			  </el-form-item>
			  <el-form-item label="密码" prop="password">
			    <el-input type="password" v-model="ruleForm.password"></el-input>
			  </el-form-item>
			  <el-form-item>
			    <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
			    <el-button @click="resetForm('ruleForm')">重置</el-button>
			  </el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	export default {
	    data() {
	      return {
	        ruleForm: {
	         username:'admin',
			 password:'123456'
	        },
	        rules: {
	          username: [
	            { required: true, message: '用户名不能为空', trigger: 'blur' }
	          ],
	          password: [
	            { required: true, message: '密码不能为空', trigger: 'blur' }
	          ]
	        }
	      };
	    },
	    methods: {
	      submitForm(formName) {
	        this.$refs[formName].validate((valid) => {
	          if (valid) {
	            this.$axios.post('/login',this.ruleForm).then(res=>{
					if(res.meta.status == 200){
						this.$message({
						    showClose: true,
						    message: res.meta.msg,
						    type: 'success'
						});
						sessionStorage.setItem('token',res.data.token)
						this.$store.commit('setuser',res.data)
						this.$router.push('/index')
					}else{
						this.$message({
						    showClose: true,
						    message: res.meta.msg,
						    type: 'error'
						});
						this.ruleForm = {
							username:'',
							password:''
						}
					}
				})
	          } else {
	            console.log('error submit!!');
	            return false;
	          }
	        });
	      },
	      resetForm(formName) {
	        this.$refs[formName].resetFields();
	      }
	    }
	  }
</script>

<style>
	.login{
		width: 100%;
		height: 100%;
		background-color: aliceblue;
	}
	.login-main{
		width: 500px;
		height: 300px;
		background-color: #fff;
		border-radius: 10px;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
	}
</style>
